Responsive Web Design by Ethan Marcotte

Author:Ethan Marcotte [Marcotte, Ethan]
Language: eng
Format: epub, mobi
Tags: COMPUTERS / Web / Site Design
ISBN: 9780984442584
Publisher: A Book Apart
Published: 2011-06-13T16:00:00+00:00

FIG 4.9: By default, Mobile Safari renders web content at 980px wide—even though its display is 320px wide when held in portrait mode.

Using the viewport tag allows us to control the size of that canvas, and override that default behavior: we can dictate exactly how wide the browser’s viewport should be. For example, we could set our pages at a fixed width of 320px:

<meta name="viewport" content="width=320" />

Since being introduced by Apple, a number of mobile browser makers have adopted the viewport mechanic, creating something of a de facto standard. So let’s incorporate it into our soon-to-be responsive design. But instead of declaring a fixed pixel width, we’re going to take a more resolution-agnostic approach. In the head of our HTML, let’s drop in this meta element:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

The initial-scale property sets the zoom level of the page to 1.0, or 100%, and helps ensure some consistency across small-screen, viewport-aware browsers. (For more information on how scaling works on different displays, I recommend Mozilla’s explanation: http://bkaprt.com/rwd/30/.)

But the important bit for us is the width=device-width setting, which makes the width of the browser’s viewport equal to the width of the device’s screen. So on an iPhone, for example, Mobile Safari’s layout area wouldn’t default to 980px anymore. Instead, it would be 320 pixels wide in portrait mode; in landscape, 480 pixels wide.

With this value in place, we can use max-width and min-width to look for resolution ranges below or above certain resolution thresholds, and conditionally load in CSS designed for those ranges. What’s more, this allows all query-aware browsers to take advantage of our media queries, making the design responsive for all users—whether they’re using phones, tablets, desktop computers, or laptops.

Okay, enough of my jabbering. Let’s see this in action.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.